import delegates from '../../utils/delegates'
import * as icons from '../../utils/icons'
import {isMobile} from '../../utils/browser'

class Video {
  constructor (player) {
    this.player = player

    delegates(this.player, this)
      .method('play')
      .method('pause')
      .method('toggle')
      .method('stop')
      .method('getState')

    this.subEvents()

    this.setPlayBtnIcon(icons.play)
    this.initPlayButton()
  }

  subEvents () {
    const mediaEvents = [
      'abort',
      'canplay',
      'canplaythrough',
      'durationchange',
      'emptied',
      'ended',
      'error',
      'loadeddata',
      'loadedmetadata',
      'loadstart',
      'mozaudioavailable',
      'pause',
      'play',
      'playing',
      'progress',
      'ratechange',
      'seeked',
      'seeking',
      'stalled',
      'suspend',
      'timeupdate',
      'volumechange',
      'waiting'
    ]
    // const outerMediaEvent = ['play', 'pause']

    mediaEvents.forEach(evt => {
      this.player.dom.video.addEventListener(evt, () => {
        this.player.trigger('media_' + evt)
        // outerMediaEvent.indexOf(evt) >= 0 && this.player.trigger(evt)
      })
    })

    this.player.on('media_play', () => {
      this._triggerStateEvt('play', 'playing')
      this.setPlayBtnIcon(icons.pause)
      this.player.timer.loading.start()
      this.player.controller.bezel.switch(icons.play)
    })
    this.player.on('media_pause', () => {
      this._triggerStateEvt('pause', 'paused')
      this.setPlayBtnIcon(icons.play)
      this.player.timer.loading.stop()
      this.player.controller.bezel.switch(icons.pause)
    })
    this.player.on('media_ended', () => {
      this._triggerStateEvt('idle')
    })
    this.player.on('internal_buffer', status => {
      if (status) {
        this.player.dom.container.classList.add(
          `${this.player._baseClass}-loading`
        )
        this._triggerStateEvt('buffer', 'buffering')
      } else {
        this.player.dom.container.classList.remove(
          `${this.player._baseClass}-loading`
        )
        // TODO: 检查video状态, 处理idle, pause, playing
        this._triggerStateEvt('play', 'playing')
      }
    })
  }

  _triggerStateEvt (type, newState) {
    newState = newState || type
    this.player.trigger(type, {
      type,
      oldState: this.player._status.state,
      newState
    })
    this.player._status.state = newState
  }

  initPlayButton () {
    this.player.dom.leftPlayBtn.addEventListener('click', () => {
      this.player.toggle()
    })

    if (!isMobile()) {
      this.player.dom.videoWrap.addEventListener('click', () => {
        this.player.getControls() && this.player.toggle()
      })
      this.player.dom.controllerMask.addEventListener('click', () => {
        this.player.getControls() && this.player.toggle()
      })
    }
  }

  setPlayBtnIcon (icon) {
    this.player.dom.leftPlayBtn.querySelector(
      `.${this.player._baseClass}-icon-content`
    ).innerHTML = icon
  }

  toggle () {
    const state = this.player._status.state
    if (state === 'paused' || state === 'idle') {
      this.play()
    } else {
      this.pause()
    }
  }

  play () {
    this.player.trigger('beforePlay', {type: 'beforePlay'})
    return this.player.dom.video.play()
  }

  pause () {
    return this.player.dom.video.pause()
  }

  stop () {}

  getState () {
    return this.player._status.state
  }
}

export default Video
